<template>
  <view class="editInfo_wrapper">
    <view class="edit-tit">基本信息</view>
    <view class="edit-info-list">
      <up-form
        labelPosition="left"
        :model="userInfo"
        :rules="rules"
        ref="uFormRef">
        <up-form-item
          label="姓名:"
          labelWidth="auto"
          prop="nickname"
          borderBottom
          ref="name">
          <up-input
            :readonly="!isEdit"
            v-model="userInfo.nickname"
            border="none"
            placeholder="请输入姓名"
            inputAlign="right"></up-input>
          <template #right v-if="isEdit">
            <up-icon name="arrow-right"></up-icon>
          </template>
        </up-form-item>
        <up-form-item
          label="地区:"
          labelWidth="auto"
          prop="address"
          borderBottom
          ref="address"
          @click="handleSelect">
          <up-input
            readonly
            v-model="userInfo.address"
            border="none"
            inputAlign="right"
            placeholder="请选择地区"></up-input>
          <template #right v-if="isEdit">
            <up-icon name="arrow-right"></up-icon>
          </template>
        </up-form-item>
        <up-form-item
          label="联系电话:"
          labelWidth="auto"
          prop="mobile"
          borderBottom
          ref="phone">
          <up-input
            :readonly="!isEdit"
            v-model="userInfo.mobile"
            border="none"
            inputAlign="right"
            placeholder="请输入联系电话"></up-input>
          <template #right v-if="isEdit">
            <up-icon name="arrow-right"></up-icon>
          </template>
        </up-form-item>
      </up-form>
    </view>
    <view class="zixun" v-if="!isEdit">
      <view class="title">咨询事项</view>
      <view class="tags s-flex-r-s-s s-flex-wrap">
        <view
          class="tag s-flex-c-c-c"
          v-for="(item, index) in userInfo.service_labels_name"
          :key="index">
          <text>{{ item }}</text>
        </view>
      </view>
    </view>
    <view class="apply-btn-wrapper">
      <view class="apply-btn" v-if="isEdit" @click="handleSave">
        <text>保存</text>
      </view>
      <view class="apply-btn" v-if="!isEdit" @click="isEdit = true">
        <text>编辑资料</text>
      </view>
      <view
        class="apply-btn"
        style="margin-top: 20rpx"
        v-if="!isEdit"
        @click="logOut">
        <text>退出登录</text>
      </view>
    </view>
    <up-picker
      :show="show"
      ref="uPickerRef"
      :columns="columns"
      keyName="name"
      @confirm="confirm"
      @cancel="show=false"
      @change="changeHandler"></up-picker>
  </view>
</template>

<script setup>
import { ref, unref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import { onLoad } from "@dcloudio/uni-app";
const uFormRef = ref(null);
const uPickerRef = ref(null);
const currentProvince = ref({});
const userInfo = ref({ nickname: "", address: "", mobile: "" });
const rules = {
  nickname: [
    {
      required: true,
      message: "请输入申请意向院校及专业志向",
      trigger: ["blur", "change"],
    },
  ],
  mobile: [
    {
      required: true,
      message: "请选择修读方式",
      trigger: ["blur", "change"],
    },
  ],
  address: [
    {
      type: "string",
      message: "请选择拟报读学历",
      trigger: ["blur", "change"],
    },
  ],
};
function logOut() {
  uni.clearStorageSync();
  uni.switchTab({
    url: "/pages/index/index",
  });
}
const columns = ref([[], [], []]);
const show = ref(false);
const isEdit = ref(false);
function handleSave() {
  uFormRef.value
    .validate()
    .then((valid) => {
      if (valid) {
        proxy
          .$request({
            url: "api/User/editUserInfo",
            header: "application/x-www-form-urlencoded",
            data: userInfo.value,
          })
          .then((res) => {
            if (res.code == 0) {
              return proxy.$toast(res.msg);
            } else {
              proxy.$toast(res.msg);
              isEdit.value = false;
              getUserData();
              console.log("isEdit.value: ", isEdit.value);
            }
          });
      } else {
        uni.$u.toast("校验失败");
      }
    })
    .catch(() => {
      // 处理验证错误
      uni.$u.toast("校验失败");
    });
}
function confirm(e) {
  console.log("e: ", e);
  userInfo.value.province_id = e.value[0].id;
  userInfo.value.city_id = e.value[1].id;
  userInfo.value.district_id = e.value[2].id;
  userInfo.value.address = `${e.value[0].name}-${e.value[1].name}-${e.value[2].name}`;
  show.value = false;
}
function handleSelect() {
  if (isEdit.value) {
    show.value = true;
  }
}
const changeHandler = (e) => {
  console.log("e: ", e);
  const { columnIndex, value, values, index } = e;

  if (columnIndex === 0) {
    currentProvince.value = value[0];
    getProvince({ province_id: value[0].id }, 1);
  }
  if (columnIndex === 1) {
    // currentProvince.value = value[1];
	getProvince(
	  { province_id: value[0].id, city_id: value[1].id },
	  2
	);
  }
};
// 获取省市区列表
function getProvince(data, index) {
  proxy
    .$request({
      url: "/api/User/getAreaLists",
      header: "application/x-www-form-urlencoded",
      data: data,
    })
    .then((res) => {
      if (res.code == 0) {
        return proxy.$toast(res.msg);
      } else {
        uPickerRef.value.setColumnValues(index, res.data);
        if (index == 0) {
          getProvince({ province_id: res.data[0].id }, 1);
          currentProvince.value = res.data[0];
        }
        if (index == 1) {
          getProvince(
            { province_id: currentProvince.value.id, city_id: res.data[0].id },
            2
          );
        }
      }
    });
}
getProvince({}, 0);
function getUserData() {
  proxy
    .$request({
      url: "api/User/getUserInfo",
      header: "application/x-www-form-urlencoded",
      data: {},
    })
    .then((res) => {
      if (res.code == 0) {
        return proxy.$toast(res.msg);
      } else {
        userInfo.value = res.data;
      }
    });
}
getUserData();
</script>

<style lang="scss" scoped>
.zixun {
  .title {
    padding: 6rpx 32rpx;
    box-sizing: border-box;
    width: 750rpx;
    height: 80rpx;
    background: #f8f8f8;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    line-height: 76rpx;
  }
  .tags {
    padding: 20rpx 32rpx;
    .tag {
      height: 60rpx;
      background: #fff6ee;
      border-radius: 16rpx;
      margin-right: 20rpx;
      padding: 0 28rpx;
      width: max-content;
      font-size: 24rpx;
      color: #ff9839;
      line-height: 28rpx;
    }
  }
}
.editInfo_wrapper {
  // background: #F8F8F8;
  .edit-tit {
    padding: 0 32rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #f8f8f8;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    color: #999999;
    font-size: 26rpx;
  }

  .edit-info-list {
    padding: 0 32rpx;
    background: #fff;
  }

  .apply-btn-wrapper {
    position: fixed;
    bottom: 50rpx;
    background: #fff;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    width: 100%;
    height: 200rpx;

    .apply-btn {
      margin: 0 auto;
      height: 96rpx;
      background: linear-gradient(128deg, #ff9839 0%, #ff7139 100%);
      border-radius: 200rpx;
      width: 686rpx;
      text-align: center;
      font-size: 32rpx;
      color: #fff;
      line-height: 96rpx;
    }
  }
}
</style>
